<template lang="">
    <div>
        <el-dialog :before-close="cancel" center :title="isAdd ? '添加轮播图' : '修改轮播图'"  :visible.sync="isShow">
       <el-form :model="bannerForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="标题" prop="title">
    <el-input v-model="bannerForm.title"></el-input>
  </el-form-item>
   <el-form-item
          label="图片"
          :label-width="formLabelWidth"
        >
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :on-change="changeFile"
            :http-request="uploadHttpRequest"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- 图片预览组件 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
          <el-form-item  label="状态">
   <el-switch
    v-model="bannerForm.status"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="2">
  </el-switch>
</el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="comfirm">确 定</el-button>
  </div>
  </el-dialog>
    </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { bannerAdd, bannerInfo, bannerEdit } from '../../request/api'
export default {
  props: ['isShow', 'isAdd'],
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      bannerForm: {
        title: '',//轮播图名称
        img: '',//图片(文件)
        status: 1,//状态  1正常2禁用
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      formLabelWidth: '120px'

    }
  },
  computed: {
    ...mapGetters({
      bannerlist: "banner/getBannerList"
    })
  },
  methods: {
    ...mapActions({
      getBanner: "banner/changeBannerlistAcyions"
    }),
    uploadHttpRequest(data) { },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    //文件修改时触发
    changeFile(file, filelist) {
      // console.log(file, filelist, "change");
      this.bannerForm.img = file.raw;
    },
    //图片预览
    onPreview(file) {
      // console.log(file, "图片预览");
      //给预览图片赋值
      this.dialogImageUrl = file.url;
      //打开弹框
      this.dialogVisible = true;
    },
    onRemove(file, filelist) {
      console.log(file, filelist, "移除");
    },

    // 取消
    cancel() {
      this.$emit('cancel', false)
      this.reset()
    },
    // 清空
    reset() {
      this.bannerForm = {
        title: '',//轮播图名称
        img: '',//图片(文件)
        status: 1,//状态  1正常2禁用
      }
      this.$refs.ruleForm.resetFields()
      // 清空文件列表
      this.fileList = []
    },
    //获取一条数据
    lockup(id){
      bannerInfo({id}).then((res)=>{
        if(res.code==200){
          this.bannerForm = res.list;
          this.bannerForm.id = id
          this.fileList = [{url:this.$img + res.list.img}]
        }
      })
    },
    // 确定
    comfirm() {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          // 判断是编辑还是添加
          if (this.isAdd) {
            console.log(this.bannerForm,'阿拉啦啦啦啦');
            // 添加接口
            bannerAdd(this.bannerForm).then((res) => {
              // console.log(res,'添加');
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getBanner()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // console.log('编辑接口');
             // 添加接口
            bannerEdit(this.bannerForm).then((res) => {
              // console.log(res,'添加');
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getBanner()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    }
  },

}
</script>
<style lang="">
    
</style>